<template>
  <a-layout id="userInfo">
    <!-- 顶部图片区域 -->
    <div class="banner">
      <img src="@/assets/userinfo.jpg" alt="banner" class="banner-img" />
    </div>

    <!-- 主体内容容器 -->
    <a-layout-content class="container">
      <!-- 左侧用户信息区域 -->
      <div class="left-section">
        <div class="user-info-card">
          <a-avatar :src="loginUser?.userAvatar" class="user-avatar" />
          <div class="user-meta">
            <div class="username">{{ loginUser?.userName }}</div>
            <div class="user-id">编号: {{ loginUser?.id }}</div>
            <div class="stats">
              <!--              <span>{{ followCount }} 关注</span>-->
              <!--              <span class="divider">·</span>-->
              <!--              <span>{{ fanCount }} 粉丝</span>-->
            </div>
          </div>
        </div>
      </div>

      <!-- 右侧按钮区域 -->
      <div class="right-section">
        <div class="action-buttons">
          <div class="right-button">
            <a-button
              type="primary"
              :icon="h(EditOutlined)"
              size="large"
              shape="round"
              @click="showUpdateDialog"
            />
            <span class="btn-text">修改资料</span>
          </div>

          <div class="right-button">
            <a-button
              type="primary"
              :icon="h(LockOutlined)"
              size="large"
              shape="round"
              @click="showUpdatePasswordMoral"
            />
            <span class="btn-text">修改密码</span>
          </div>

        </div>
      </div>
    </a-layout-content>
  </a-layout>

  <!-- 弹出修改信息对话框 -->
  <a-modal v-model:open="updateModalVisual" title="修改资料" :footer="null">
    <div class="modal-content">
      <!-- 头像区域 -->
      <!-- TODO 加入修改头像的功能 -->
      <div class="avatar-section">
        <a-avatar :src="loginUser?.userAvatar" class="user-avatar" />
        <a-button
          type="primary"
          shape="circle"
          :icon="h(PlusOutlined)"
          size="small"
          class="change-avatar-btn"
        ></a-button>
      </div>

      <!--  修改表单区域    -->
      <div class="form-container">
        <a-form
          :model="updateParams"
          name="update"
          autocomplete="off"
          @finish="handleSubmitUpdate"
          hideRequiredMark="false"
        >
          <!--   TODO 增加修改头像的功能   -->
          <a-form-item
            label="昵称"
            name="userName"
            :rules="[{ required: true, message: '请输入昵称' }]"
          >
            <a-input v-model:value="updateParams.userName" size="large" />
          </a-form-item>

          <a-form-item
            label="简介"
            name="userProfile"
            :rules="[{ required: true, message: '请输入简介' }]"
          >
            <a-input v-model:value="updateParams.userProfile" size="large" />
          </a-form-item>

          <a-form-item name="id">
            <template #label>
              <span>编号</span>
            </template>
            <a-input v-model:value="updateParams.id" disabled size="large" />
          </a-form-item>

          <a-form-item label="账号" name="userAccount">
            <a-input v-model:value="updateParams.userAccount" disabled size="large" />
          </a-form-item>

          <a-form-item label="角色" name="userRole">
            <a-input
              :value="updateParams?.userRole === 'admin' ? '管理员' : '普通用户'"
              disabled
              size="large"
            />
          </a-form-item>

          <a-form-item class="submit-item">
            <a-button class="submit-button" type="primary" html-type="submit">完成</a-button>
          </a-form-item>
        </a-form>
      </div>
    </div>
  </a-modal>

  <!-- 弹出修改密码对话框 -->
  <a-modal v-model:open="updatePasswordModalVisual" title="修改密码" :footer="null" @cancel="doClearUpdateParams">
    <div class="modal-content">
      <!--  修改表单区域    -->
      <div class="form-container">
        <a-form
          :model="updateParams"
          name="update"
          autocomplete="off"
          @finish="handleSubmitUpdate"
          hideRequiredMark="false"
        >
          <a-form-item
            label="旧密码 &nbsp;&nbsp;"
            name="userPassword"
            :rules="[
              { required: true, message: '请输入旧密码' },
              { min: 8, message: '旧密码长度不能小于8位' },
            ]"
          >
            <a-input v-model:value="updateParams.userPassword" size="large" />
          </a-form-item>

          <a-form-item
            label="新密码 &nbsp;&nbsp;"
            name="newPassword"
            :rules="[
              { required: true, message: '请输入新密码' },
              { min: 8, message: '新密码长度不能小于8位' },
            ]"
          >
            <a-input-password v-model:value="updateParams.newPassword" size="large" />
          </a-form-item>

          <a-form-item
            label="确认密码"
            name="checkPassword"
            :rules="[
              { required: true, message: '请再次输入新密码' },
              { min: 8, message: '确认密码长度不能小于8位' },
            ]"
          >
            <a-input-password v-model:value="updateParams.checkPassword" size="large" />
          </a-form-item>

          <a-form-item class="submit-item">
            <a-button class="submit-button" type="primary" html-type="submit">确认修改</a-button>
          </a-form-item>
        </a-form>
      </div>
    </div>
  </a-modal>
</template>

<script setup lang="ts">
// 数据定义（保持不变）
import {
  EditOutlined,
  LockOutlined,
  PlusOutlined,
} from '@ant-design/icons-vue'
import { h, onMounted, ref } from 'vue'
import { useLoginUserStore } from '@/stores/userLogin'
import { message } from 'ant-design-vue'
import { editUserUsingPost } from '@/api/userController'
import { useRouter } from 'vue-router'

const router = useRouter();

// 获取当前登录用户信息
const loginUser = ref<API.UserVO>()
const loginUserStore = useLoginUserStore()

// 定义修改表单的数据源
const updateParams = ref<API.UserUpdateDTO>({})

// 修改用户信息对话框状态
const updateModalVisual = ref(false)
// 修改密码对话框状态
const updatePasswordModalVisual = ref(false)

// 页面挂载时,获取当前登录用户信息
onMounted(() => {
  if (loginUserStore.loginUser) {
    loginUser.value = loginUserStore.loginUser
  }
})

// 显示修改资料对话框
const showUpdateDialog = () => {
  // 回显当前登录用户的表单数据
  if (loginUser.value) {
    updateParams.value = {
      userName: loginUser.value.userName,
      userProfile: loginUser.value.userProfile,
      id: loginUser.value.id,
      userRole: loginUser.value.userRole,
      userAccount: loginUser.value.userAccount,
    }
  }
  updateModalVisual.value = true
}

// 显示修改密码对话框
const showUpdatePasswordMoral = () => {
  updatePasswordModalVisual.value = true
}

/**
 * 提交表单修改用户信息
 */
const handleSubmitUpdate = async () => {
  const res = await editUserUsingPost({
    ...updateParams.value,
    id: loginUser.value?.id
  })
  if (res.data.code === 0 && res.data.data) {
    message.success('修改成功')
    // 手动更新当前组件的 loginUser
    loginUser.value = {
      ...loginUser.value,
      userName: updateParams.value.userName,
      userProfile: updateParams.value.userProfile,
    }
    // 重新加载更新后的登录用户信息
    await loginUserStore.fetchLoginUser()
    updateModalVisual.value = false
    updatePasswordModalVisual.value = false
    router.go(0)
  } else {
    message.error('修改失败' + res.data.message)
  }
}

/**
 * 关闭对话框时，清理表单
 */
const doClearUpdateParams = () => {
  updateParams.value = {
    userPassword: '',
    newPassword: '',
    checkPassword: '',
  }
}

</script>

<style scoped>
#userInfo {
  padding: 20px;
  margin: 0 200px;
  background-color: #f0f3f0;
  border-radius: 50px;
  /* 确保页面有基础高度，避免内容过短时布局塌陷 */
  min-height: calc(80vh - 40px);
  box-sizing: border-box;
}

/* 顶部图片区域 */
.banner {
  width: 100%;
  overflow: hidden;
  height: 160px; /* 适度降低banner高度 */
  border-radius: 50px;
  margin-bottom: 16px; /* 减小与下方容器的间距 */
}

.banner-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 主体容器 - 降低高度，减小留白 */
.container {
  display: flex;
  gap: 16px; /* 缩小左右区域间距 */
  padding: 0;
  height: 140px; /* 容器高度从200px降至140px */
}

/* 左侧用户信息区域 */
.left-section {
  flex: 1;
  margin: 20px;
}

.user-info-card {
  display: flex;
  align-items: center;
  background: #fff;
  padding: 16px 20px; /* 减小内边距 */
  border-radius: 16px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
  height: 100%;
  box-sizing: border-box;
}

.user-avatar {
  width: 70px; /* 适度缩小头像 */
  height: 70px;
  margin-right: 16px; /* 减小头像与文字的间距 */
  border: 2px solid #f0f3f0;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.user-meta {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.username {
  font-size: 20px; /* 缩小字体 */
  font-weight: 600;
  color: #333;
  margin-bottom: 4px; /* 减小文字间留白 */
}

.user-id {
  color: #666;
  font-size: 14px;
  margin-bottom: 4px;
}

.stats {
  color: #888;
  font-size: 13px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.divider {
  color: #ddd;
}

/* 右侧按钮区域 */
.right-section {
  width: 360px; /* 适度缩小按钮区域宽度 */
  margin: 20px;
}

/* 按钮区域整体布局 */
.action-buttons {
  display: flex;
  justify-content: space-around; /* 按钮组横向分布 */
  align-items: center;
  background: #fff;
  border-radius: 16px;
  padding: 16px 0;
}

/* 每个按钮 + 文字组合 */
.right-button {
  display: flex;
  flex-direction: column; /* 垂直排列：按钮在上，文字在下 */
  align-items: center;
  justify-content: center;
  gap: 8px; /* 按钮和文字之间的间距 */
}

/* 按钮文字样式 */
.btn-text {
  font-size: 14px;
  color: #333;
  text-align: center;
}

/* 按钮悬停效果保持 */
.action-btn:not(.ant-btn-danger):hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(45, 140, 240, 0.2);
}

/*对话框相关样式*/
.modal-content {
  text-align: center;
  max-height: 700px;
}

.avatar-section {
  margin-bottom: 20px;
  position: relative;
}

.user-avatar {
  width: 100px;
  height: 100px;
  margin-bottom: 10px;
}

.change-avatar-btn {
  position: absolute;
  bottom: 0;
  right: 0;
  background-color: #4caf50;
  border-color: #4caf50;
  box-shadow: 0 4px 12px rgba(76, 175, 80, 0.2);
}

.form-container {
  max-height: 400px; /* 设置最大高度 */
  overflow-y: auto; /* 当内容高度超出时显示滚动条 */
}

.ant-form-item {
  text-align: left;
  margin: 40px auto;
  width: 80%;
}

.ant-form-item-label {
  width: 100%;
  text-align: left;
}

.ant-input {
  width: 300px; /* 设置输入框的宽度 */
}

/* 调整提交按钮所在表单项的布局 */
.submit-item {
  display: flex;
  justify-content: center; /* 水平居中 */
  margin: 20px auto !important; /* 重置margin，避免与其他项冲突 */
  padding-left: 0 !important; /* 取消默认左对齐的padding */
}

/* 提交表单的按钮 */
.submit-button {
  width: 200px;
  text-align: center;
  background-color: #4caf50;
  border-color: #4caf50;
  box-shadow: 0 4px 12px rgba(76, 175, 80, 0.2);
}
</style>
